<template>
  <div class="container-xl my-home-div">

    <div class="my-home-div-line row">
      <div class="col">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-icon_team_Book"></use>
        </svg>
        团队题目
      </div>
      <div class="col text-right">
        <el-button @click="dialogVisible = true" v-show="isAdmin" type="primary" size="default">添加团队题目</el-button>
      </div>
    </div>
    <div class="row min-height" v-if="getquestioncount" v-loading="loading">
      <div class="col">
        <table class="table">
          <tbody>
            <tr class="thead">
              <td width="80" scope="col" class="m-pl-6 m-border-2">状态</td>
              <td width="120" scope="col">编号</td>
              <td scope="col">题目</td>
              <td scope="col">知识点</td>
              <td width="80" scope="col">AC次数</td>
              <td width="80" scope="col">提交次数</td>
              <td width="174" class="text-center" v-show="isAdmin" scope="col">查看统计</td>
              <td class="text-center" v-if="isAdmin" width="80">删除</td>

            </tr>
            <router-link v-for="(v, key) in getquestion" :key="key" :to="{
          name: '题目',
          params: { ID: v.ID },
        }" custom v-slot="{ navigate }">
              <tr>
                <td class="m-pl-6 m-border-2">
                  <el-icon :color="Number(v.myACcount) ? 'var(--color-cheng)' : 'var(--color-43)'">
                    <Select v-if="Number(v.myACcount)" />
                    <CloseBold v-else-if="Number(v.myUNcount)" />
                    <SemiSelect v-else />
                  </el-icon>
                </td>
                <td class="cu" @click="navigate" v-text="v.ID"></td>
                <td class="cu" @click="navigate">{{ v.name }} &nbsp; <span v-text="v.goldremarks" v-show="isAdmin"
                    :style="{ fontSize: '12px', color: '#888' }"></span> </td>
                <td>
                  <el-button type="primary" plain size="small" v-for="(vo, keys) in v.questionlabel"
                    v-text="getlabel.find(e => e.ID === vo.labelid)?.name" :key="`1-${keys}`"></el-button>
                </td>
                <td>{{ v.ACcount }}</td>
                <td>{{ v.userquestioncount }}</td>
                <td v-show="isAdmin">
                  <router-link v-slot="{ href }" :custom="true" :to="{ name: '成员测评记录', query: { questionid: v.ID } }">
                    <a target="_blank" :href="href">
                      <el-button size="default" v-show="isAdmin" :style="{
          marginRight: '6px', display: 'inline-block'
        }">
                        评测记录
                      </el-button>
                    </a>
                  </router-link>
                  <router-link v-slot="{ href }" :custom="true" :to="{ name: '题目排行榜', query: { questionid: v.ID } }">
                    <a target="_blank" :href="href" :style="{ display: 'inline-block' }">
                      <el-button size="default" v-show="isAdmin">
                        成员统计
                      </el-button>
                    </a>
                  </router-link>
                </td>
                <td v-if="isAdmin" class="text-center">
                  <el-button size="default" @click="del(Number(v.ID))" type="danger">删除</el-button>
                </td>
              </tr>
            </router-link>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row" v-if="getquestioncount">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="getquestioncount" @current-change="change" layout="prev, pager, next"
          :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
    <el-empty v-if="!getquestioncount" image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />
    <el-dialog v-model="dialogVisible" title="选择题单" width="840px" :before-close="start">
      <addselectquestionVue :addclick="addclick" :teamid="getteam.filter(e => e.ID !== p.data?.ID).map(e => e.ID)">
      </addselectquestionVue>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import { CloseBold, Select, SemiSelect } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "underscore";
import {
  computed,
  onMounted,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { asyncaddquestionteam, asyncdelquestionteam, asyncselectquestion } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import addselectquestionVue from "./addselectquestion.vue";
import { badgeType } from "./type";
const p = defineProps<{
  data?: Studycodemodel.Iteam,
  changeteam?: (str: Studycodemodel.Iteam) => void,
  isAdmin?: 0 | 1 | 2
  user?: Studycodemodel.Iuser
  teamusers?: Studycodemodel.Iteamuser[]
  getUsers?: Function
  badge?: badgeType
}>()
const getlabel = computed(() => {
  return store.state.label?.rows || []
})
const store = useStore(Storekey);
const getquestion = ref<Studycodemodel.Iquestion[]>([])
const name = ref("");
const getquestioncount = ref(0)
const dialogVisible = ref(false)

const loading = ref(true)
const order = ref<keyof Studycodemodel.Iquestion>("ID");
const offset = ref(0);
const limit = ref(10);

const teamid = computed(() => {
  return p.data?.ID || 0;
});
watch(teamid, () => {
  offset.value = 0;
});

const getteam = computed(() => {
  return store.state.team?.rows || []
})

watch([offset, order, limit, name], (e, r) => {
  start();
});
function index(v: any) {
  if (!v) return false;
  const [x] = v;
  if (x) {
    const z = new Date(x.createdAt).getTime() || Date.now();
    return Date.now() < z + 1000 * 60 * 60 * 24 * 7;
  }
  return false;
}

onMounted(() => {
  start();
});
function debounce1() {
  return debounce(() => {
    let _like: [keyof Studycodemodel.Iquestion, any];
    if (name.value) {
      _like = ["name", name.value];
    }
    dialogVisible.value = false
    loading.value = true
    asyncselectquestion({
      _order: order.value,
      _offset: offset.value,
      _limit: limit.value,
      _like,
      teamid: teamid.value,
    }).then(e => {
      loading.value = false
      getquestion.value = e.rows
      getquestioncount.value = e.count
    })

  }, 300);
}
const start = debounce1();

function change(r: number) {
  offset.value = (r - 1) * 10;
}

function myqueston(userquestion?: Studycodemodel.Iuserquestion[]) {
  if (userquestion && userquestion.length !== 0) {
    return {
      text: "已提交",
      type: "success",
    };
  } else {
    return {
      text: "未提交",
      type: "info",
    };
  }
}





async function del(id: number) {
  ElMessageBox.confirm("确定要删除此题单", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        await asyncdelquestionteam({ questionid: id, teamid: teamid.value });
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        start()
      } catch (e) {
        ElMessage({
          message: String(e),
          type: "error",
        });
      }
    })
    .catch(() => {

    });
}

async function addclick(v: Studycodemodel.Iquestionbank) {
  await asyncaddquestionteam({ questionid: v.ID, teamid: teamid.value }).then(() => {
    ElMessage.success('添加成功')
  }).catch(f => {
    ElMessage.error(f)
  })
}

</script>

<style scoped>
.bg {
  background-color: #f2f2f2;
}

.cu {
  cursor: pointer;
}

.cu:hover {
  color: var(--color-cheng);
}

.containermain {
  padding-bottom: 25px;
  margin-bottom: 40px;
  padding-top: 40px;
  margin-top: 25px;
}


tr {
  line-height: 56px;
}

td {
  padding: 0 !important;
}

.t1 {
  margin-top: -25px;
}

.thead {
  font-weight: 700;
  height: 30px;
  line-height: 29px;
}

.min-height .col {
  padding: 12px;
}

.container-xl {
  --bs-gutter-x: 0, --my-home-div-height: 56px;
}

.min-height {
  --bs-gutter-x: 0
}
</style>